<!-- 医疗机构执业许可证 Form表单 -->
<template>
  <div class="medical-institution-practice-licence-form">
    <el-dialog
      v-bind="$attrs"
      v-on="$listeners"
      width="846px"
      @opened='openedDialog'
    >
      <slot name="header"/>
      <el-form :model="businessFormData" :disabled='edit' :rules="rules" ref="formItem" label-width="160px" class="form-item">
        <el-form-item label="医疗机构名称" prop="medicalInstitutionName">
          <el-input v-model="businessFormData.medicalInstitutionName" placeholder="请输入医疗机构名称" :disabled='true'></el-input>
        </el-form-item>
        <el-form-item label="登记号" prop="registerNum">
          <el-input  placeholder="请输入登记号" v-model="businessFormData.registerNum" :disabled='true'></el-input>
        </el-form-item>
        <el-form-item label="成立时间" prop="createDate">
          <el-input placeholder="请输入成立时间" v-model="businessFormData.createDate"></el-input>
        </el-form-item>
        <el-form-item label="机构电话" prop="institutionPhone">
          <el-input placeholder="请输入机构电话" v-model="businessFormData.institutionPhone"></el-input>
        </el-form-item>
        <el-form-item label="机构邮箱" prop="institutionEmail">
          <el-input placeholder="请输入机构邮箱" v-model="businessFormData.institutionEmail"></el-input>
        </el-form-item>
        <el-form-item label="联系人姓名" prop="linkMan">
          <el-input  v-model="businessFormData.linkMan"></el-input>
        </el-form-item>
        <el-form-item label="联系人手机" prop="linkManPhone">
          <el-input  v-model="businessFormData.linkManPhone"></el-input>
        </el-form-item>
        <el-form-item label="所在地区" prop="institutionArea">
          <el-input placeholder="请输入所在地区" v-model="businessFormData.institutionArea"></el-input>
        </el-form-item>
        <el-form-item label="收件人地址" prop="addressDetail">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 2}" placeholder="请输入收件人地址" v-model="businessFormData.addressDetail"></el-input>
        </el-form-item>
        <el-form-item label="长期有效" prop="effectivenessKey">
          <el-select @change="changeEffectiveness" v-model="businessFormData.effectivenessKey">
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="有效期" prop="date">
          <div class="date-ops-corver">
            <el-date-picker
              value-format="yyyy-MM-dd"
              v-model="businessFormData.startDate"
              align="right"
              type="date"
              placeholder="开始日期"
              @change="changeDate"
              :picker-options="pickerOptionsStart">
            </el-date-picker>
            <div class="date-split">
              <span></span>
            </div>
            <el-date-picker
              value-format="yyyy-MM-dd"
              :disabled='!!Boolean(businessFormData.effectivenessKey)'
              v-model="businessFormData.endDate"
              align="right"
              type="date"
              placeholder="结束日期"
              @change="changeDate"
              :picker-options="pickerOptionsEnd">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="医疗机构执业许可证" prop="url">
          <div class="url-corver">
            <licence-img-card
              :imgUrl='businessFormData.url'
              @uploadCb='getUploadUrl'
              :disabled='edit'
            />
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="refuseSubmit">取 消</el-button>
        <el-button type="primary" @click="confirmSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import licenceImgCard from '@/moduleComponents/licence/card/licenceImgCard'
import {selectByHospitalNameOrNumber} from '@const/externalDataSource.js'
export default {
  name: 'medicalInstitutionPracticeLicenceForm',
  components: {
    licenceImgCard
  },
  props: {
    form: {
      type: Object,
      default: () => {}
    },
    edit: {
      default: false,
      type: Boolean
    },
    adminData:{
      default: () =>{},
      type: Object
    },
  },
  watch:{
    form:{
      handler(nv,ov) {
        if(!nv.registerNum) {
          this.businessFormData.medicalInstitutionName = ''
          this.businessFormData.registerNum = ''
          this.businessFormData.createDate = ''
          this.businessFormData.linkMan = ''
          this.businessFormData.linkManPhone = ''
          this.businessFormData.institutionEmail = ''
          this.businessFormData.institutionPhone = ''
          this.businessFormData.institutionArea = ''
          this.businessFormData.addressDetail = ''
          this.businessFormData.startDate = ''
          this.businessFormData.endDate = ''
          this.businessFormData.effectivenessKey = ''
          this.businessFormData.url = ''
          this.businessFormData.date = ''
          return
        }
        this.businessFormData = {
          medicalInstitutionName: nv.medicalInstitutionName, 
          registerNum: nv.registerNum, 
          createDate: nv.createDate, 
          linkMan: nv.linkMan, 
          linkManPhone: nv.linkManPhone, 
          institutionEmail: nv.institutionEmail, 
          institutionPhone: nv.institutionPhone, 
          institutionArea: nv.institutionArea, 
          addressDetail: nv.addressDetail,
          startDate: nv.startDate, 
          endDate: nv.endDate, 
          effectivenessKey: nv.effectivenessKey,
          url: nv.url, 
          date: '' 
        } || {}
        this.changeDate()
        // this.businessFormData.date = ((this.businessFormData && this.businessFormData.startDate) || '') + '' + ((this.businessFormData && this.businessFormData.endDate) || '')
      },
      deep: true
    }
  },
  data() {
    return {
      pickerOptionsStart: {
        disabledDate: time => {
          let endDateVal = this.businessFormData.endDate
          if (endDateVal) {
            return time.getTime() > new Date(endDateVal).getTime()
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          let beginDateVal = this.businessFormData.startDate
          if (beginDateVal) {
            return (
              time.getTime() < new Date(beginDateVal).getTime() ||
              time.getTime() < Date.now() - 8.64e7
            )
          } else {
            return time.getTime() < Date.now()
          }
        }
      },
      businessFormData: {
        medicalInstitutionName:'', // 医疗机构名称
        registerNum: '', // 医疗机构登记号
        createDate: '', // 成立时间
        institutionPhone: '', // 机构电话
        institutionEmail: '', // 机构邮箱
        linkMan: '', // 联系人姓名
        linkManPhone: '', // 联系人电话
        institutionArea: '', // 所在地区
        addressDetail: '', // 收件人地址
        effectivenessKey:'', // 是否长期有效
        startDate:'', // 有效期起始日期
        endDate:'', // 有效期截止日期
        date: '',
        url: ''
      },
      rules: {
        medicalInstitutionName: [
          { required: true, message: '请输入医疗机构名称', trigger: 'blur' },
        ],
        registerNum: [
          { required: true, message: '请输入医疗机构登记号', trigger: 'blur' },
        ],
        effectivenessKey: [
          { required: true, message: '请选择是否长期有效', trigger: 'change' },
        ],
        date: [
          { required: true, message: '请选择有效期', trigger: 'change' },
        ],
        url: [
          { required: true, message: '请上传证照图片', trigger: 'change' },
        ]
      }
    }
  },
  methods:{
    openedDialog() {
      if(this.adminData.companyName !== this.businessFormData.medicalInstitutionName) {
        this.businessFormData.medicalInstitutionName = this.adminData.companyName
        this.businessFormData.registerNum = this.adminData.creditCode
        // this.getDetailByHospitalName()
      }
    },
    changeEffectiveness() {
      if(!!this.businessFormData.effectivenessKey) {
        this.businessFormData.endDate = ''
      }
      // 重新为date赋值
      this.changeDate()
    },
    changeDate() {
      // 非长期有效模式
      if((!this.businessFormData.startDate || !this.businessFormData.endDate) && !this.businessFormData.effectivenessKey){
        this.businessFormData.date = ''
        return
      }
      // 长期有效模式
      if(!this.businessFormData.startDate && this.businessFormData.effectivenessKey) {
        this.businessFormData.date = ''
        return
      }
      this.businessFormData.date = (this.businessFormData.startDate || '') + '#' + (this.businessFormData.endDate || '')
    },
    getDetailByHospitalName() {
      this.$axios({
        method: 'get',
        url: selectByHospitalNameOrNumber,
        params:{
          keyword: this.businessFormData.medicalInstitutionName
        }
      }).then(res => {
        let result = res.data.payload
        this.businessFormData.medicalInstitutionName = result.fullName
        this.businessFormData.registerNum = result.hospitalRegistrationNumber
        this.businessFormData.createDate = result.createdAt
        this.businessFormData.linkMan = result.linkMan
        this.businessFormData.linkManPhone = result.linkManPhone
        this.businessFormData.institutionEmail = result.presidentEmail
        this.businessFormData.institutionPhone = result.presidentPhone
        this.businessFormData.institutionArea = result.province
        this.businessFormData.addressDetail = result.address
        this.businessFormData.startDate = result.busLicenceStatrDate && result.busLicenceStatrDate.split(' ')[0]
        this.businessFormData.endDate = result.busLicenceEndDate && result.busLicenceEndDate.split(' ')[0]
        this.businessFormData.effectivenessKey = result.busLicenceEndDate ? 0 : 1
        this.changeDate()
        this.$emit('updateAutoData', this.businessFormData)
        console.log(this.businessFormData,'businessFormData')
      }).finally(() => {
        this.$refs.formItem.clearValidate()
      })
    },
    // getCompanyType() {
    //   this.$axios({
    //     method: 'get',
    //     url: companyNewListCompanyTypeVO
    //   }).then(res => {
    //     this.companyTypeOpsEnum = res.data.payload
    //   })
    // },
    getUploadUrl(data) {
      this.businessFormData.url = data.payload
      console.log(this.businessFormData.url,'0---0')
    },
    refuseSubmit() {
      this.$emit('refuse')
    },
    confirmSubmit() {
      this.$refs['formItem'].validate((valid) => {
        if (valid) {
          this.$emit('submit', this.businessFormData)
        } else {
          return false;
        }
      });
    }
  }
}
</script>
<style lang="less">
.medical-institution-practice-licence-form {
  .el-dialog__body{
    padding: 0;
  }
  .el-input__inner, .el-textarea__inner{
    width: 330px;
  }
  .el-textarea__inner{
    min-height: 54px;
    max-height: 54px;
    height: 54px;
  }
  .el-date-editor.el-input{
    width: 144px;
  }
  .date-ops-corver{
    .el-input__inner, .el-textarea__inner{
      width: 144px;
    }
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    .date-split{
      width: 42px;
      display: flex;
      justify-content: center;
      align-items: center;
      span{
        display: inline-block;
        font-size: 0;
        width: 20px;
        border-top: 1px solid #ccc;        
      }
    }
  }
  .url-corver{
    width: 330px;
    height: auto;
  }
  .dialog-class-name {
    padding-bottom: 20px;
    font-size: 14px;
    color: #E63937;
  }
  .form-item{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
}
</style>
